<template>
    <div>
        <div class="m-box" v-show='list_show'>
            <hint :title="hint.title" :content="hint.content"></hint>
            <h2>管理员列表（共有{{num}}条记录）
                <el-button type="primary" plain size="small" @click="add_page">添 加</el-button>
            </h2>
            <el-table
                    :data="tableData"
                    v-loading="loading"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="管理员名称"
                >
                </el-table-column>
                <el-table-column
                        prop="roleName"
                        label="管理员角色"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit_admins(scope.row.id)" type="primary" size="small">编辑</el-button>
                        <el-button type="danger" size="small" @click="del_admins(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-show="add_show" class="m-box">
            <now-position :address="now_address.address" :doing="now_address.doing" @go-back="go_back"></now-position>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px" class="demo-ruleForm">
                <el-form-item label="管理员名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                    <em class="c-danger">只能为纯字母组成</em>
                </el-form-item>
                <el-form-item label="管理员角色" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择管理员角色">
                        <el-option v-for="item in roles" :label="item.name" :key="item.id" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="管理员密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                    <em class="c-danger">必须由字母、数字、特殊符号组成</em>
                </el-form-item>
                <el-form-item label="确认密码" prop="re_password">
                    <el-input v-model="ruleForm.re_password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            //自定义验证规则
            var passwordSame = (rule, value, callback) => {
                if (value !== this.ruleForm.password) {
                    callback(new Error('两次密码输入不一致'));
                }
                callback();
            };
            return {
                hint: {
                    'title': '操作提示',
                    'content': '后台管理员列表，超级管理员不在此列表内！'
                },
                now_address: {
                    address: '管理员',
                    doing: '编辑',
                },
                num: null,
                tableData: [],
                loading: true,
                list_show: '',
                add_show: '',
                ruleForm: this.start_data(),
                roles:[], //所有角色
                admin_id: null, //管理员id
                rules: {
                    name: [
                        {required: true, message: '请输入管理员名称', trigger: 'blur'},
                        {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                    ],
                    role: [
                        {required: true, message: '请选择管理员角色', trigger: 'change'},
                    ],
                    password: [
                        {required: true, message: '请输入管理员登录密码', trigger: 'blur'},
                        {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
                    ],
                    re_password: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {validator: passwordSame, trigger: 'blur'}
                    ],
                }
            }
        },
        created() {
            this.get_admins();//获取管理员列表
            this.go_back();//列表显示页
        },
        methods: {
            get_admins() { //获取管理员列表
                axios.post(this.adminApi('admins-list')
                ).then(res => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        this.tableData = res.data.info;
                        this.num = this.tableData.length
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    this.$message.error('请稍后重试')
                })
            },
            add_page() { //进入添加界面
                this.ruleForm = this.start_data()
                this.list_show = false;
                this.add_show = true;
                this.get_roles()
            },
            go_back() { //列表界面
                this.list_show = true;
                this.add_show = false
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.save_admin();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            start_data() { //清除添加或保存数据
                return {
                    name: '',
                    role: '',
                    password: '',
                    re_password: ''
                }
            },
            save_admin() { //保存管理员
                axios.post(this.adminApi('admins-save'), {
                    id: this.admin_id,
                    name: this.ruleForm.name,
                    role: this.ruleForm.role,
                    password: this.ruleForm.password,
                }).then(res => {
                    if (res.data.code === 0) {
                        this.$message.success(res.data.msg)
                        this.get_admins();
                        this.go_back()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    this.$message.error('请稍后重试')
                })
            },
            edit_admins(id) { //编辑管理员
                this.add_page();
                axios.post(this.adminApi("admins-edit"), {
                    id: id
                }).then(res => {
                    if (res.data.code === 0) {
                        this.admin_id = res.data.info.id
                        this.ruleForm.name = res.data.info.name;
                        this.ruleForm.role = res.data.info.role_id;
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    this.$message.error('请重新刷新！');
                })
            },
            get_roles() { //获取角色列表
                axios.post(this.adminApi('roles-list')
                ).then(res=> {
                    if (res.data.code === 0) {
                        this.roles = res.data.info;
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err=>{
                    this.$message('请重新刷新');
                })
            },
            del_admins(id) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { //确定执行下面
                    axios.post(this.adminApi("admins-del"),{
                        id: id
                    }).then(res=>{
                        if (res.data.code === 0) {
                            this.$message.success(res.data.msg)
                            this.get_admins()
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }).catch(err=>{
                        this.$message.error('请重新刷新');
                    })
                })
            },
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin-top: 30px;
    }
</style>